<template>
    <div class="Invest-one">
        <div class="Invest-two">
            <div style="float:left;width:300px;margin-top:2%">
                <span style="font-size:15px;color:grey;margin-left:10%;">投资中本金</span>
                <br/>
                <br/>
                <span style="font-size:20px;color:red;margin-left:9%">{{ sumPrice }}元</span>
            </div>
            <div style="float:left;width:300px;margin-top:2%">
                <span style="font-size:15px;color:grey;margin-left:10%;">预计总投资年收益</span>
                <br/>
                <br/>
                <span style="font-size:20px;margin-left:12%;">{{ sumCountMoney }}元</span>
            </div>
        </div>

        <div class="Invest-three">
            <div class="Invest-four">
                <div class="Invest-row">
                    <span style="font-size:18px;">日期：</span>
                        <el-date-picker
                        v-model="startDate"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        style="width:16%;margin-left:13px;"
                        @change="findDate()"
                    >
                    </el-date-picker>
                    -
                    <el-date-picker
                        v-model="endDate"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        style="width:16%;"  
                        @change="findDate()"
                    >
                    </el-date-picker>
                    <el-button style="margin-left:12px;color:white;background-color: red;border:none;" @click="findDate(all)">全部</el-button>
                    <el-button style="border:none;background-color: rgb(224, 222, 222);" class="el-rows"  @click="findDate(weekTime)">最近7天</el-button>
                    <el-button style="border:none;background-color: rgb(224, 222, 222);" class="el-rows"  @click="findDate(month)">最近1个月</el-button>
                    <el-button style="border:none;background-color: rgb(224, 222, 222);" class="el-rows"  @click="findDate(threeMonth)">最近3个月</el-button>
                </div>

                <div class="Invest-row">
                    <span style="font-size:18px;">类型：</span>
                    <el-button style="margin-left:13px;color:white;background-color: red; border:none;" @click="findType(all)">全部</el-button>
                    <el-button style="border:none;background-color:rgb(224, 222, 222);" class="el-rows" @click="findType(car)">车贷</el-button>
                    <el-button style="border:none;background-color:rgb(224, 222, 222);" class="el-rows" @click="findType(house)">房贷</el-button>
                    <el-button style="border:none;background-color:rgb(224, 222, 222);" class="el-rows" @click="findType(manage)">经营贷</el-button>
                    <el-button style="border:none;background-color:rgb(224, 222, 222);" class="el-rows" @click="findType(consumption)">消费贷</el-button>
                </div>
            </div>

            <el-table
                style="width: 100%; margin-top: 10px"
                :header-cell-style="{ background: 'silver', color: '#606266' }"
                :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)">
                <el-table-column width="30"></el-table-column>
                <el-table-column label="时间" width="150px" prop="investment_date"></el-table-column>
                <el-table-column label="投资名称" width="150px" prop="investment_name"></el-table-column>
                <el-table-column label="投资金额" width="150px" prop="investment_money">
                    <template slot-scope="scope">
                        {{ scope.row.investment_money}}元
                    </template>
                </el-table-column>
                <el-table-column label="年利率收益" width="160px" prop="investment_rate">
                    <template slot-scope="scope">
                        {{ scope.row.investment_rate}}%
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="150px" prop="investment_status">
                    <template slot-scope="scope">
                        {{ scope.row.investment_status==1 ? "投资中":"已完成"}}
                    </template>
                </el-table-column>
                
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 6, 9, 12, 15]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 20px; margin-left: 150px;"
                :total="list.length"
                >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data () {
        return { 
            sumPrice:"",      //投资中本金
            sumCountMoney:"", //预计总投资年收益
            list:[],
            currentPage: 1, //初始页
            pagesize: 3, //每页条数
            all:"",   //全部
            car: 1, //车贷
            house: 2, //房贷
            manage: 3, //经营贷
            consumption: 4, //消费贷
            weekTime:2,    //7天
            month:3,       //一个月
            threeMonth:4,  //3个月
            startDate:"",   //开始时间
            endDate:""      //结束时间
        }
    },
    created () {
        this.findList();
        this.findSumMoney();
        this.querySumCountMoney();
    },
    methods: {
        findList() {
            axios({
                url: "/api/recordinves/getRecordInvesList",
            }).then((res) => {
                console.log(res);
                this.list = res.data;
            })
        },
        findSumMoney() {
            axios({
                url:"/api/user/sumMoney",
            }).then((res) => {
                console.log(res.data.data);
                this.sumPrice = res.data.data;
            })
        },
        querySumCountMoney() {
            axios({
                url:"/api/user/sumCountMoney",
            }).then((res) => {
                console.log();
                this.sumCountMoney = res.data.data;
            })
        },
        handleSizeChange(size) {
            console.log(size, "size");
            this.pagesize = size;
            console.log(this.pagesize); //每页下拉显示数据
        },
        handleCurrentChange(currentPage) {
            console.log(currentPage, "currentPage");
            this.currentPage = currentPage;
            console.log(this.currentPage); //点击第几页
        },

        //类型条查
        findType(InvestType) {
            // alert(InvestType)
            axios({
                url: "/api/recordinves/getRecordInvesList",
                params: {
                    investment_type: InvestType,
                },
            }).then((res) => {
                console.log(res);
                this.list = res.data;
            });
        },
        //最近7天，一个月，三个月条查,和时间条查
        findDate(time) {
            // alert(time)
            axios({
                url: "/api/recordinves/getRecordInvesList",
                params: {
                    typeDate: time,
                    startDate: this.startDate,
                    endDate: this.endDate,
                },
            }).then((res) => {
                console.log(res);
                this.list = res.data;
            });
        },
    }
}
</script>

<style>
.Invest-one{
    width: 100%;
    height: 100%;
    float: left;
    background-color: #f6f6f6;
}
.Invest-two{
    width: 100%;
    /* background-color: aqua; */
    height: 120px;
    background-color: white;
    float: left;
}
.Invest-three{
    width: 100%;
    float: left;
    height: 600px;
    background-color: white;
    margin-top: 20px;
    padding-left: 50px;
}
.Invest-four{
    width: 100%;
    height: 180px;
    /* background-color: rebeccapurple; */
    float: left;
}
.Invest-row{
    width: 100%;
    height: 65px;
    float: left;
    padding-top: 20px;
}
.el-rows:hover{
    color: red !important;
}
</style>